<template>
    <div>
        <el-steps :active="activePage" simple>
            <el-step title="填写基本信息" icon="el-icon-edit"></el-step>
            <el-step title="上传deb包" icon="el-icon-upload"></el-step>
            <el-step title="投递成功" icon="el-icon-success"></el-step>
        </el-steps>

        <div class="fill-form-div" :class="{'hidden':activePage != 1}">
            <commitComponent @gotoDebPage="gotoDebPage" @exitCommit="exitCommit"></commitComponent>
        </div>
        <div class="upload-div" :class="{'hidden':activePage != 2}">
            <el-row type="flex" justify="center" class="upload-container">
                <el-upload
                    drag
                    :action="debFileAPI"
                    :name="inputName"
                    :auto-upload="true"
                    :on-success="handleUploadSuccess"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或
                        <em>点击上传</em>
                    </div>
                </el-upload>
            </el-row>
            <el-row>
                <!-- <el-button type="primary" @click="activePage = 1">上一页</el-button> -->
                <!-- <el-button type="primary" @click="activePage = 3">下一页</el-button> -->
            </el-row>
        </div>
        <div class="success-div" :class="{'hidden':activePage != 3}">
            <el-row type="flex" justify="center" class="success-row">
                <el-progress type="circle" :percentage="percentage" status="success"></el-progress>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="12" class="button-column">
                    <el-button type="primary" @click="recommit">再来一个</el-button>
                </el-col>
                <el-col :span="12" class="button-column">
                    <el-button type="primary" @click="exitCommit">返回上一页</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { DEB_API, commitDebInfo } from "../util/myRequests";
import commitComponent from "../components/commit";

export default {
    name: "add",
    components: { commitComponent },
    data() {
        return {
            activePage: 1,
            debAPI: DEB_API,
            inputName: "deb_file",
            deb_id: 0,
            percentage: 0,
        };
    },
    computed: {
        debFileAPI() {
            if (this.deb_id <= 0) return "";
            return `${DEB_API}/${this.deb_id}`;
        },
    },
    mounted() {},
    methods: {
        gotoDebPage(id) {
            this.activePage = 2;
            this.deb_id = id;
            // commitDebInfo(this.$store.state.commitForm)
            //     .then(res => {
            //         this.deb_id = res["deb_id"];
            //     })
            //     .catch(error => {
            //         console.log(error);
            //     });
        },
        handleUploadSuccess(response, file, fileList) {
            this.activePage = 3;
            for (var index = 0; index <= 100; index++) {
                this.percentage = index;
            }
        },
        recommit() {
            this.$store.commit("clearCommitForm");
            this.activePage = 1;
        },
        exitCommit() {
            this.$router.go(-1);
        },
    },
    beforeRouteLeave(to, from, next) {
        this.$store.commit("clearCommitForm");
        next();
    },
};
</script>

<style>
.hidden {
    display: none;
}
.upload-container {
    margin-top: 48px;
}
.success-row {
    margin-top: 128px;
    margin-bottom: 64px;
}
.button-column {
    display: flex;
    justify-content: center;
}
</style>